<template>
  <div>
    <el-button
      type="primary"
      icon="el-icon-edit"
      size="mini"
      style="margin-left: 40px"
      @click="add()"
      >上传</el-button
    >
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="lists"
      border
      style="width: 98%; margin: 0 auto"
    >
      <el-table-column align="center" label="Id" width="60">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="图片" width="200">
        <template slot-scope="scope">
          <img :src="scope.row.image" alt="" style="width: 100%" />
        </template>
      </el-table-column>

      <el-table-column align="center" label="标题" width="60">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="60px">
        <template slot-scope="scope">
          <!--          <el-tag :type="scope.row.type | filterType">{{ scope.row.type | filterTxt }}</el-tag>-->
          {{ scope.row.sort }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="排序" width="60">
        <template slot-scope="scope">
          {{ scope.row.sort }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="添加时间">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="更新时间">
        <template slot-scope="scope">
          {{ scope.row.updated_at }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="280px">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            plain
            size="mini"
            type="primary"
            @click="(dialogFormVisibleChange = true), change(scope.row)"
            >修改</el-button
          >
          <el-popconfirm
            cancel-button-text="取消"
            confirm-button-text="确定"
            icon="el-icon-info"
            icon-color="red"
            title="这是一段内容确定删除吗？"
            @confirm="confirmDelete(scope.row.id)"
          >
            <el-button
              slot="reference"
              icon="el-icon-delete"
              size="mini"
              style="margin-left: 20px"
              type="danger"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加 -->
    <el-dialog :visible.sync="dialogFormVisible" title="添加数据">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth" label="名称">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          :label-width="formLabelWidth"
          :model="form"
          label="上传图片"
        >
          <template>
            <Upload></Upload>
          </template>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmAadd(form)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog :visible.sync="dialogFormVisibleChange" title="修改数据">
      <el-form :model="changeForm">
        <el-form-item :label-width="formLabelWidth" label="id">
          <el-input v-model="changeForm.id" autocomplete="off" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="标题">
          <el-input v-model="changeForm.title" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
          :label-width="formLabelWidth"
          :model="changeForm.image"
          label="上传图片"
        >
          <template>
            <Upload></Upload>
          </template>
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="状态">
          <el-input v-model="changeForm.sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleChange = false">取 消</el-button>
        <el-button type="primary" @click="confirmChange">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { c, z, s, g } from "@/api/gly";
import { Message } from "element-ui";

export default {
  name: "index",
  data() {
    return {
      lists: [],
      dialogFormVisible: false,
      dialogFormVisibleChange: false,
      loading: true,
      formLabelWidth: "120px",
      form: {
        title: null,
        image: null,
      },
      changeForm: [],
    };
  },
  methods: {
    async fetchDate() {
      await c().then((response) => {
        console.log(response);
        if (response.code == 200) {
          this.loading = false;
          const { data } = response.data;
          this.lists = data;
        }
      });
    },
    // 添加
    add() {
      this.dialogFormVisible = true;
    },

    async confirmAadd(getform) {
      const imgUrl = this.$store.state.upload.imgUrl;
      this.form.image = imgUrl;
      await z(getform).then((response) => {
        if (response.code == 200) {
          this.fetchDate();
          this.loading = true;
          setTimeout(() => {
            this.loading = false;
            this.dialogFormVisible = false;
            Message.success({
              message: "添加成功",
            });
          }, 300);
          this.$store.commit("upload/CLEAR_IMG");
        }
      });
    },
    // 删除
    async deleteThis(id) {
      await s(id).then((response) => {
        this.loading = true;
        if (response.code == 200) {
          setTimeout(() => {
            this.loading = false;
            Message.info({
              message: "删除成功",
            });
          }, 1300);
          this.fetchDate();
        }
      });
    },
    confirmDelete(a) {
      this.deleteThis(a);
    },
    // 改
    async change(form) {
      this.changeForm = form;
    },
    //  确认修改
     async confirmChange() {
      const imgUrl = this.changeForm.image;
      console.log(imgUrl);
      // this.changeForm.image = imgUrl;
      if (this.$store.state.upload.imgUrl == null) {
        this.changeForm.image = imgUrl;
        console.log(this.changeForm.image)
        console.log(this.changeForm);
        await g(this.changeForm).then((response) => {
          if (response.code == 200) {
            this.dialogFormVisibleChange = false;
            this.loading = true;
            this.fetchDate();
            setTimeout(() => {
              this.loading = false;
              Message.success({
                message: "修改成功",
              });
            }, 300);
            // this.$store.commit("upload/CLEAR_IMG");
          }
        });
      } else {
        const imgUrl = this.$store.state.upload.imgUrl;
        this.changeForm.image = imgUrl;
        await g(this.changeForm).then((response) => {
          if (response.code == 200) {
            this.dialogFormVisibleChange = false;
            this.loading = true;
            this.fetchDate();
            setTimeout(() => {
              this.loading = false;
              Message.success({
                message: "修改成功",
              });
            }, 300);
            this.$store.commit("upload/CLEAR_IMG");
          }
        });
      }
    },
  },
  created() {
    this.fetchDate();
  },
};
</script>

<style scoped>
</style>
